import {Component, Input, Output, OnInit, EventEmitter} from 'angular2/core';
import {Alert} from 'ionic-angular';
import {Page} from 'ionic-angular';
import {NavController, NavParams} from 'ionic-angular';

import {ImgPathPipe} from '../../pipes/img-path';
import {CurrencyCnyPipe} from '../../pipes/currency-cny';

import {Category} from '../../models/category';
import {Product} from '../../models/product';

import {CommonService}    from '../../services/common';
import {PostService}    from '../../services/post';
import {HomeService}    from '../../services/home';

import {DropmenuComponent} from '../../components/dropmenu/dropmenu';
import {ProductListComponent} from '../../components/product-list/product-list';
import {ProductDetail} from '../product/product-detail';

@Page({
    templateUrl: 'build/pages/home/home.html',
    providers: [CommonService, PostService, HomeService],
    directives: [DropmenuComponent, ProductListComponent],
    pipes: [ImgPathPipe,CurrencyCnyPipe]
})
export class Home {
    data: any;
    errorMessage: any;
    slideHeight: number;

    constructor(private nav: NavController, private _homeService: HomeService, private _commonService: CommonService) {
        let me = this;
        me.slideHeight = _commonService.getScreenSize().h * 0.4 / 14;
        // console.log(me.slideHeight);

        this._homeService.getData().subscribe(
            json => me.data = json.data,
            error => me.errorMessage = <any>error
        );
    }

    doAlert() {
        let alert = Alert.create({
          title: 'New Friend!',
          message: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
          buttons: ['Ok']
        });
        this.nav.present(alert);
    }

    doPrompt() {
        let prompt = Alert.create({
          title: 'Login',
          message: "Enter a name for this new album you're so keen on adding",
          inputs: [
            {
              name: 'title',
              placeholder: 'Title'
            },
          ],
          buttons: [
            {
              text: 'Cancel',
              handler: data => {
                console.log('Cancel clicked');
              }
            },
            {
              text: 'Save',
              handler: data => {
                console.log('Saved clicked');
              }
            }
          ]
        });
        this.nav.present(prompt);
    }

    doRadio() {
        let alert = Alert.create();
        alert.setTitle('Lightsaber color');

        alert.addInput({
          type: 'radio',
          label: 'Blue',
          value: 'blue',
          checked: true
        });

        alert.addInput({
          type: 'radio',
          label: 'Green',
          value: 'green'
        });

        alert.addInput({
          type: 'radio',
          label: 'Red',
          value: 'red'
        });

        alert.addInput({
          type: 'radio',
          label: 'Yellow',
          value: 'yellow'
        });

        alert.addInput({
          type: 'radio',
          label: 'Purple',
          value: 'purple'
        });

        alert.addInput({
          type: 'radio',
          label: 'White',
          value: 'white'
        });

        alert.addInput({
          type: 'radio',
          label: 'Black',
          value: 'black'
        });

        alert.addButton('Cancel');
        alert.addButton({
          text: 'Ok',
          handler: data => {
            console.log('Radio data:', data);
            this.testRadioOpen = false;
            this.testRadioResult = data;
          }
        });

        this.nav.present(alert).then(() => {
          this.testRadioOpen = true;
        });
      }

    onPageDidEnter(): void {

    }

    onProductSelected(item) {
        this.nav.push(ProductDetail, item.id);
    }
}
